<template>
  <div class="container">
    <el-dialog
      :title="titleText"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      @close="restForm"
    >
      <el-form
        :model="companyDetails"
        :rules="skillrules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题:" prop="title">
          <el-input v-model="companyDetails.title"></el-input>
        </el-form-item>

        <el-form-item label="文章内容:" prop="articleBody" class="hightBox">
          <quill-editor v-model="companyDetails.articleBody"></quill-editor>
        </el-form-item>

        <el-form-item label="视频地址:" prop="videoURL">
          <el-input v-model="companyDetails.videoURL"></el-input>
        </el-form-item>

        <el-form-item size="large">
          <el-button @click="defaltBtn">取消</el-button>
          <el-button type="primary" @click="revise">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { update, add } from "@/api/hmmm/articles.js";

export default {
  computed: {
    titleText() {
      if (this.category) {
        return "修改技巧";
      } else {
        return "添加技巧";
      }
    }
  },
  data() {
    return {
      skillrules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        articleBody: [
          { required: true, message: "请输入文章内容", trigger: "blur" }
        ],
        videoURL: [
          { required: true, message: "请输入文章内容", trigger: "blur" }
        ]
      }
    };
  },
  props: {
    dialogVisible: { type: Boolean, required: true },
    category: { type: Boolean, required: true },
    companyDetails: { type: Object }
  },
  methods: {
    handleClose() {
      this.$emit("closedialog");
    },
    async revise() {
      if (this.category) {
        // 修改信息======
        await update(this.companyDetails);
      } else {
        // 添加技巧=====
        await add(this.companyDetails);
      }
      this.$emit("colosedialog");
      this.$emit("updatalist");
    },
    restForm() {
      this.$refs.ruleForm.resetFields();
    },
    defaltBtn() {
      this.$emit("colosedialog");
    }
  }
};
</script>

<style scoped lang="less">
/deep/.hightBox {
  height: 200px;
}
</style>
